import React, { useState } from "react";
import style from "./index.module.less";
import icon4 from "@/style/imgs/pinggu/tb6.5461c26.png";
import icon5 from "@/style/imgs/pinggu/tb7.1d0fa6d.png";
import icon6 from "@/style/imgs/pinggu/tb8.0a93d91.png";
import icon7 from "@/style/imgs/pinggu/tb9.bbb7dc0.png";
import icon8 from "@/style/imgs/pinggu/tb10.fc4798e.png";
import icon9 from "@/style/imgs/pinggu/tb11.7271dd8.png";
import icon10 from "@/style/imgs/pinggu/tb12.da4fdcf.png";

const Process = () => {
  const [processList, setProcessList] = useState([
    // { icon: icon4, list: ["01 注册登录", "注册登录平台"] },
    { icon: icon5, list: ["01 提交稿件并付费", "提交稿件后将自动报价付款完成将通知工作员工为您服务"] },
    { icon: icon6, list: ["02 进行论文修改", "付款完成将通知工作员工为您服务派发给相关专业的资深编辑进行修改"] },
    { icon: icon7, list: ["03 交付成果", "规定时间内完成稿件交付可登录到系统下载"] },
    { icon: icon8, list: ["04 客户评价", "收到修改稿后，您可以对我们的服务做出评价"] },
    { icon: icon9, list: ["05 提供发票", "免费开具用来报销的发票，发票分两种，美国发票（invoice）和中国发票"] },
    { icon: icon10, list: ["06 售后服务", "对稿件有任何问题可随时联系我们全程邮件通知，记录痕迹"] },
  ]);
  return <>
    {/* 服务流程 */}
    <div className={style.process_body}>
      <div className={`h2 black ${style.h2}`}>服务流程</div>
      <div className={style.process_content}>
        {processList.map((item: any, index: number) => {
          return <div className={style.process_item} key={index}>
            <img src={item.icon} alt="图片加载失败" />
            <div className={style.item_right}>
              <div className={style.process_desic}>{item.list[0]}</div>
              <div className={style.process_desic}>{item.list[1]}</div>
            </div>
          </div>
        })}
      </div>

    </div>
  </>
}

export default Process;